<template>
    <div>
       <div class="login_img">
      <img src="../../assets/touxiang.jpg" alt="">
      </div>
      <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{pattern, required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" @click="goIndex">
      登录
    </van-button>
  </div>
</van-form>
    </div>
</template>

<script setup>
import {useRouter} from 'vue-router';
import {post} from '../../utils/request'

import {ref}from 'vue'
const router=useRouter()
  let username=ref('')
  let password=ref('')
    const pattern = /\d{6}/;
  const onSubmit=()=>{
    console.log('onSubmit');
    console.log(username.value,password.value);
  }



const goIndex =async ()=>{
  let res =await post('/login',{
  'phone':username.value,
  'password':password.value,
})
  console.log(res);
  router.push('/Index')
  let tok=res.result.token
  console.log(tok)
  sessionStorage.setItem("token",tok)
}
// const goRegister = ()=>{
//   router.push('/Register')
// }
</script>

<style lang="scss">


.login_img{
    margin:0 auto;
    margin-top:1.2rem;
    width: 0.66rem;
    height: 0.66rem;
    img{
        display: block;
        width: 0.66rem;
        height: 0.66rem;
        border-radius: 0.33rem;
    }
}

// button{
//      margin:0rem auto;
//   margin-left:0.4rem; 
//   margin-top:0.32rem;
//     width: 2.99rem;
//     height: 0.52rem;
//     background-color:#0091FF;
//     font-size:0.16rem;
//     color:#fff;
//     border:0;
//     border-radius:0.1rem;
// }
// .register_btn{
//     float:left;
//     margin-left:1.18rem;
//     margin-top:0.16rem;
//     width: 0.56rem;
//     height: 0.2rem;
//     font-size:0.14rem;
//     color:#000;
// }
// .shu{
//     float:left;
//     width: 0.02rem;
//     height: 0.17rem;
//      margin-top:0.16rem;
//     margin-left:0.12rem;
//     background-color: grey;
// }
// .forget_btn{
//     float:left;
//     margin-left:0.12rem;
//     margin-top:0.16rem;
//     width: 0.56rem;
//     height: 0.2rem;
//     font-size:0.14rem;
//     color:#000;
// }
// span {
//  margin-left:0.4rem; 
//  width: 0.56rem;
//   color: red;
//     visibility: hidden;
// }

</style>